<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebAPI Test Tools</title>
    <!--<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <style>
    </style>
</head>


<body>
    <div id="app" class="container-fluid">
        <div>
            <h1>WebAPI Test Tools</h1>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="url">Base Url:</label>
                    <input type="text" class="form-control" id="url" v-model="baseUrl">
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                    <label for="actionName">Action Name:</label>
                    <select class="custom-select" id="actionName" v-model="actionVal">
                        <option value="1">Get Test</option>
                        <option value="2">Get Test with parameter</option>
                        <option value="3">Get GetMethods</option>
                        <option value="4">Get Execute</option>
                        <option value="5">Get Invoke</option>
                        <option value="6">Post Execute</option>
                        <option value="7">Post Invoke</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group" v-show="showParamInput">
            <label for="testParam">Parameter:</label>
            <input type="text" class="form-control" id="testParam" v-model="info.Parameter">
        </div>
        <div class="row" v-show="!showParamInput && !notMethod">
            <div class="col">
                <div class="form-group">
                    <label for="UserName">UserName:</label>
                    <input type="text" class="form-control" id="UserName" v-model="info.UserName">
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                    <label for="Token">Token:</label>
                    <input type="text" class="form-control" id="Token" v-model="info.token">
                </div>
            </div>
        </div>
        <div class="form-group" v-show="!showParamInput && !notMethod">
            <label for="methodName">Method Name:</label>
            <!-- <input type="text" class="form-control" id="methodName" v-model="info.methodName"> -->
            <div class="input-group">
                <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"
                       v-model="info.methodName">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-secondary" @click="getAllMetods">GetMethods</button>
                    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" v-for="(item,key) in allMethodNames" :key="key"
                           @click="info.methodName = item">{{item}}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group" v-show="!showParamInput && !notMethod">
            <label for="methodArgs">Method Args:</label>
            <textarea class="form-control" id="methodArgs" value="" rows="10" v-model="info.methodArgs"></textarea>
        </div>
        <button type="button" class="btn btn-primary" style="width: 100%;" @click="runAjax">Submit</button>
        <div class="form-group" v-show="error==''">
            <label for="result">Result:</label>
            <textarea id="result" rows="10" class="form-control-plaintext" v-model="result"></textarea>
        </div>
        <div class="form-group" v-show="error!=''">
            <label for="result">Error:</label>
            <textarea id="result" rows="10" class="form-control-plaintext" v-model="error"></textarea>
        </div>
        <!-- Flexbox container for aligning the toasts -->
        <div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
            <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"
                 style="width: 400px;" data-delay="5000">
                <div class="toast-header" style="background-color: brown;">
                    <strong class="mr-auto">提示信息</strong>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="toast-body">
                    {{dlgMsg}}
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="css/bootstrap/bootstrap.bundle.min.js"></script>
    <script>
        var vueApp = new Vue({
            el: '#app',
            data() {
                return {
                    dlgMsg: '',
                    baseUrl: window.location.origin,
                    actionVal: '1',
                    allMethodNames: [],
                    info: {
                        Parameter: '',
                        UserName: '测试工具',
                        token: '205F2C4F69174CBAA3B84CA6AD55534A',
                        methodName: 'bwch.Core.WebAPI.Processor.TestApi',
                        methodArgs: '{"a":1,"b":2}'
                    },
                    result: '',
                    error: ''
                }
            },
            watch: {},
            computed: {
                showParamInput() {
                    return this.actionVal == '2';
                },
                notMethod() {
                    return this.actionVal == '1' || this.actionVal == '3'
                }
            },
            methods: {
                getConfig() {
                    var config = {
                        '1': {
                            url: 'api/test',
                            type: 'GET'
                        },
                        '2': {
                            url: 'api/test/',
                            type: 'GET'
                        },
                        '3': {
                            url: 'api/GetMethods',
                            type: 'GET'
                        },
                        '4': {
                            url: 'api/Execute/',
                            type: 'GET'
                        },
                        '5': {
                            url: 'api/Invoke/' + this.info.methodName + '/' + this.info.token + '/',
                            type: 'GET'
                        },
                        '6': {
                            url: 'api/Execute',
                            type: 'POST'
                        },
                        '7': {
                            url: 'api/Invoke/' + this.info.methodName + '/' + this.info.token,
                            type: 'POST'
                        },
                    };
                    return config[this.actionVal]
                },
                showDlg(msg) {
                    this.dlgMsg = msg;
                    $('.toast').toast('show')
                },
                runAjax() {
                    //1:Get Test;2:Get Test with parameter;3:Get GetMethods;4:Get Execute;5:Get Invoke;6:Post Execute;7:Post Invoke
                    var config = this.getConfig();
                    var ajaxType = config.type;
                    var url = this.baseUrl + '/' + config.url;
                    var bodyData = null;
                    switch (this.actionVal) {
                        case '1': //什么参数都没有
                        case '3':
                            break;
                        case '2': //只有一个Parameter
                            if (this.info.Parameter == '') {
                                this.showDlg('Parameter必须要有值');
                                return;
                            }
                            url += encodeURI(this.info.Parameter);
                            break;
                        default: //有 userName Token methodName methodArgs
                            if (this.info.methodName == '') {
                                this.showDlg('UserName/token/MethodName/MethodArgs必须要有值');
                                return;
                            }
                            break;
                    }
                    var methodArgs = '';
                    if (this.info.methodArgs == '') {
                        methodArgs = {}
                    } else {
                        methodArgs = JSON.parse(this.info.methodArgs);
                    }
                    var uiArgs = {
                        token: this.info.token,
                        userName: this.info.UserName,
                        methodName: this.info.methodName,
                        type: 'IWebAPIExecute',
                        methodArgs: methodArgs
                    };
                    switch (this.actionVal) {
                        case '4': //4:Get Execute
                            var param = encodeURI(JSON.stringify(uiArgs));
                            url += param;
                            break;
                        case '5': //Get Invoke
                            var param = encodeURI(JSON.stringify(this.info.methodArgs))
                            url += param;
                            break;
                        case '6': //6:Post Execute
                            bodyData = JSON.stringify(uiArgs);
                            break;
                        case '7': //7:Post Invoke
                            bodyData = JSON.stringify(this.info.methodArgs)
                            break;
                    }
                    this.ajax(url, ajaxType, bodyData);
                },
                ajax(url, type, bodyData, func) {
                    var self = this;
                    this.error = '';
                    this.result = '';
                    $.ajax({
                        async: false,
                        cache: false,
                        contentType: 'application/json;charset=utf-8',
                        data: bodyData,
                        type: type,
                        url: url,
                        error: function (xmlRequest, errMsg, err) {
                            console.log('xmlRequest:', xmlRequest)
                            console.log('errMsg:', errMsg)
                            console.log('err:', err)
                            self.error =
                                `errMsg:${errMsg};\r\nresponseText:${xmlRequest.responseText};\r\nerr:${err}`;
                        },
                        success: function (data) {
                            self.result = JSON.stringify(data, space = 4);
                            if (func != null) {
                                func(data)
                            }
                        }
                    });
                },
                getAllMetods() {
                    var url = this.baseUrl + '/api/getmethods';
                    var self = this;
                    this.ajax(url, 'GET', null, data => {
                        self.allMethodNames = []
                        data.forEach(d => {
                            self.allMethodNames.push(d.methodName)
                        });
                    });
                }
            },
        });
    </script>
</body>

</html>